<template>
	<div class="site-group">
		<div class="group-title">
			<slot name="title"></slot>
		</div>
		<div class="group-items" v-if="arr">
			<siteItem v-for="(item, index) in arr" :key="'item' + item.id" :item="item" @nav-click="$emit('nav-click',item)" @menu="$emit('menu',$event)">
			</siteItem>
		</div>
		<div class="group-items" v-else>	
			<siteItem v-for="i in 12" :key="'none-'+i" :item="null">
			</siteItem>
		</div>
	</div>
</template>

<script>
	import siteItem from '@/components/site/SiteItem.vue'
	export default{
		props:{
			arr:{
				type:Array,
				default:null
			},
			title:{
				type:String,
				default:''
			}
		},
		data(){
			return{
				page:1
			}
		},
		methods:{
			prev(){
				if(this.page>1){
					this.page--
				}
			},
			next(){
				if(this.page<this.maxPage){
					this.page++
				}
			}
		},
		components:{
			siteItem
		},
		computed:{
			maxPage(){
				if(this.arr===null) return 0
				return Math.ceil(this.arr.length/12)
			}
		}
	}
</script>

<style lang="scss">
.site-group {
	background-color: #fff;
	padding: 20px;
	margin-bottom: 20px;
	.group-title {
		padding-bottom: 10px;
		font-size: 20px;
		display: flex;
		align-items: center;
		.el-icon-refresh-left {
			color: #409eff;
			cursor: pointer;
		}
		.close {
			color: #409eff;
			width: 20px;
			height: 20px;
			cursor: pointer;
			transition: color 0.2s;
			&:hover {
				color: #f00;
			}
		}
	}
	.no-user {
		text-align: center;
	}

	.pager {
		display: flex;
		justify-content: center;
		margin-top: 20px;
		* {
			user-select: none;
		}
		.pager-box {
			font-size: 22px;
			.disabled i {
				cursor: not-allowed;
				&:hover {
					color: #000;
				}
			}
			i {
				padding: 10px 20px;
				cursor: pointer;
				&:hover {
					color: red;
				}
			}
		}
	}
	.group-items {
		display: flex;
		flex-wrap: wrap;
		.empty{
			color: #ccc;
			text-align: center;
			margin: auto;
		}
	}
}
</style>
